<template>
	<div class="empower-management">
		<!-- 页面标题 -->
		<div class="page-header">
			<h2><i class="el-icon-files"></i> 授权管理</h2>
			<p class="page-description">管理您的病历和检查授权申请，可以选择批准或拒绝医生的访问请求</p>
		</div>

		<!-- 标签页切换 -->
		<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
			<el-tab-pane label="病历授权" name="medicalRecord">
				<div class="tab-content">
					<h3 class="section-title"><i class="el-icon-notebook-2"></i> 病历授权管理</h3>
					<p class="section-description">管理您的病历授权申请，可以选择批准或拒绝医生的访问请求</p>

					<!-- 病历授权列表 -->
					<div class="empower-list" v-if="medicalRecordEmpowerList.length > 0">
						<el-row :gutter="20">
							<el-col :xs="24" :sm="12" :md="8" v-for="item in medicalRecordEmpowerList" :key="item.docId + '-' + item.doctorId"
								style="margin-bottom: 20px;">
								<el-card class="empower-card" shadow="hover">
									<!-- 卡片头部 -->
									<div slot="header" class="card-header">
										<span class="card-title">病历ID: {{ item.docId }}</span>
										<el-tag :type="getStatusTagType(item.isEmpower)" size="small">
											{{ getStatusText(item.isEmpower) }}
										</el-tag>
									</div>

									<!-- 授权信息 -->
									<div class="empower-info">
										<div class="info-item">
											<i class="el-icon-user"></i>
											<span class="label">医生：</span>
											<span class="value">{{ item.doctorName || `医生ID: ${item.doctorId}` }}</span>
										</div>
										<div v-if="item.hospitalName" class="info-item">
											<i class="el-icon-office-building"></i>
											<span class="label">医院：</span>
											<span class="value">{{ item.hospitalName }}</span>
										</div>
										<div class="info-item">
											<i class="el-icon-document"></i>
											<span class="label">就诊号：</span>
											<span class="value">{{ item.visitId }}</span>
										</div>
										<div class="info-item">
											<i class="el-icon-time"></i>
											<span class="label">申请状态：</span>
											<span class="value">{{ getStatusText(item.isEmpower) }}</span>
										</div>
									</div>

									<!-- 操作按钮 -->
									<div class="action-buttons">
										<!-- 授权中状态：显示批准和拒绝按钮 -->
										<template v-if="item.isEmpower === '0'">
											<el-button type="success" size="small" @click="handleMedicalRecordApprove(item)"
												:loading="item.approveLoading" icon="el-icon-check" plain>
												批准授权
											</el-button>
											<el-button type="danger" size="small" @click="handleMedicalRecordReject(item)"
												:loading="item.rejectLoading" icon="el-icon-close" plain>
												拒绝授权
											</el-button>
										</template>

										<!-- 已授权状态：显示取消授权按钮 -->
										<template v-else-if="item.isEmpower === '1'">
											<el-button type="warning" size="small" @click="handleMedicalRecordCancel(item)"
												:loading="item.cancelLoading" icon="el-icon-remove" plain>
												取消授权
											</el-button>
											<el-button type="info" size="small" disabled icon="el-icon-success">
												已授权
											</el-button>
										</template>

										<!-- 已拒绝状态：不可操作 -->
										<template v-else-if="item.isEmpower === '2'">
											<el-button type="info" size="small" disabled icon="el-icon-close">
												已拒绝
											</el-button>
											<el-button type="primary" size="small" @click="handleMedicalRecordReApprove(item)"
												:loading="item.reApproveLoading" icon="el-icon-refresh" plain>
												重新批准
											</el-button>
										</template>

										<!-- 未知状态 -->
										<template v-else>
											<el-button type="info" size="small" disabled icon="el-icon-question">
												未知状态
											</el-button>
										</template>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</div>

					<!-- 空状态 -->
					<div v-else-if="!medicalRecordLoading" class="empty-state">
						<el-empty description="暂无授权申请" :image-size="200">
							<div slot="image">
								<i class="el-icon-folder-checked" style="font-size: 100px; color: #c0c4cc;"></i>
							</div>
							<p style="color: #909399; margin-top: 10px;">目前没有医生申请访问您的病历</p>
						</el-empty>
					</div>

					<!-- 加载状态 -->
					<div v-else class="loading-state">
						<el-skeleton :rows="6" animated />
					</div>
					</div>
				</el-tab-pane>

				<!-- 检查授权标签页 -->
				<el-tab-pane label="检查授权" name="checkup">
					<div class="tab-content">
						<h3 class="section-title"><i class="el-icon-document-copy"></i> 检查授权管理</h3>
						<p class="section-description">管理您的检查报告授权申请，可以选择批准或拒绝医生的访问请求</p>

						<!-- 检查授权列表 -->
						<div class="empower-list" v-if="checkupEmpowerList.length > 0">
							<el-row :gutter="20">
								<el-col :xs="24" :sm="12" :md="8" v-for="item in checkupEmpowerList" :key="item.visitId + '-' + item.doctorId" 
									style="margin-bottom: 20px;">
									<el-card class="empower-card" shadow="hover">
										<!-- 卡片头部 -->
										<div slot="header" class="card-header">
											<span class="card-title">检查ID: {{ item.reportId || 'N/A' }}</span>
											<el-tag :type="getStatusTagType(item.isEmpower)" size="small">
												{{ getStatusText(item.isEmpower) }}
											</el-tag>
										</div>

										<!-- 授权信息 -->
										<div class="empower-info">
											<div class="info-item">
												<i class="el-icon-user"></i>
												<span class="label">医生：</span>
												<span class="value">{{ item.doctorName || `医生ID: ${item.doctorId}` }}</span>
											</div>
											<div v-if="item.hospitalName" class="info-item">
												<i class="el-icon-office-building"></i>
												<span class="label">医院：</span>
												<span class="value">{{ item.hospitalName }}</span>
											</div>
											<div class="info-item">
												<i class="el-icon-document"></i>
												<span class="label">就诊号：</span>
												<span class="value">{{ item.visitId }}</span>
											</div>
											<div class="info-item">
												<i class="el-icon-document-copy"></i>
												<span class="label">报告类型：</span>
												<span class="value">{{ formatReportType(item.reportType) }}</span>
											</div>
											<div class="info-item">
												<i class="el-icon-time"></i>
												<span class="label">创建时间：</span>
												<span class="value">{{ formatDate(item.createdTime) }}</span>
											</div>
											<div class="info-item">
												<i class="el-icon-time"></i>
												<span class="label">申请状态：</span>
												<span class="value">{{ getStatusText(item.isEmpower) }}</span>
											</div>
										</div>

										<!-- 操作按钮 -->
										<div class="action-buttons">
											<!-- 授权中状态：显示批准和拒绝按钮 -->
											<template v-if="item.isEmpower === '0'">
												<el-button type="success" size="small" @click="handleCheckupApprove(item)" 
													:loading="item.approveLoading" icon="el-icon-check" plain>
													批准授权
												</el-button>
												<el-button type="danger" size="small" @click="handleCheckupReject(item)" 
													:loading="item.rejectLoading" icon="el-icon-close" plain>
													拒绝授权
												</el-button>
											</template>

											<!-- 已授权状态：显示取消授权按钮 -->
											<template v-else-if="item.isEmpower === '1'">
												<el-button type="warning" size="small" @click="handleCheckupCancel(item)" 
													:loading="item.cancelLoading" icon="el-icon-remove" plain>
													取消授权
												</el-button>
												<el-button type="info" size="small" disabled icon="el-icon-success">
													已授权
												</el-button>
											</template>

											<!-- 已拒绝状态：不可操作 -->
											<template v-else-if="item.isEmpower === '2'">
												<el-button type="info" size="small" disabled icon="el-icon-close">
													已拒绝
												</el-button>
												<el-button type="primary" size="small" @click="handleCheckupReApprove(item)" 
													:loading="item.reApproveLoading" icon="el-icon-refresh" plain>
													重新批准
												</el-button>
											</template>

											<!-- 未知状态 -->
											<template v-else>
												<el-button type="info" size="small" disabled icon="el-icon-question">
													未知状态
												</el-button>
											</template>
										</div>
								</el-card>
							</el-col>
						</el-row>
					</div>

					<!-- 检查空状态 -->
					<div v-else-if="!checkupLoading" class="empty-state">
						<el-empty description="暂无检查授权申请" :image-size="200">
							<div slot="image">
								<i class="el-icon-document-checked" style="font-size: 100px; color: #c0c4cc;"></i>
							</div>
							<p style="color: #909399; margin-top: 10px;">目前没有医生申请访问您的检查报告</p>
						</el-empty>
					</div>

					<!-- 检查加载状态 -->
					<div v-else class="loading-state">
						<el-skeleton :rows="6" animated />
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>

		<!-- 授权确认对话框 -->
		<el-dialog title="确认授权" :visible.sync="approveDialogVisible" width="30%" @close="resetDialog">
			<div class="dialog-content">
				<p v-if="currentItem.doctorName">
					您确定要批准 <strong>{{ currentItem.doctorName }}</strong> 医生对病历 <strong>{{ currentItem.docId }}</strong>
					的访问授权吗？
				</p>
				<p v-else>
					您确定要批准 <strong>{{ currentItem.doctorId }}</strong> 医生对病历 <strong>{{ currentItem.docId }}</strong>
					的访问授权吗？
				</p>
				<p class="dialog-tip">批准后，医生将能够查看该病历的详细信息。</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="approveDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmApprove" :loading="approveLoading">
					确 定
				</el-button>
			</span>
		</el-dialog>

		<!-- 拒绝确认对话框 -->
		<el-dialog title="确认拒绝" :visible.sync="rejectDialogVisible" width="30%" @close="resetDialog">
			<div class="dialog-content">
				<p v-if="currentItem.doctorName">
					您确定要拒绝 <strong>{{ currentItem.doctorName }}</strong> 医生对病历 <strong>{{ currentItem.docId }}</strong>
					的访问授权吗？
				</p>
				<p v-else>
					您确定要拒绝 <strong>{{ currentItem.doctorId }}</strong> 医生对病历 <strong>{{ currentItem.docId }}</strong>
					的访问授权吗？
				</p>
				<p class="dialog-tip">拒绝后，医生将无法访问该病历。</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="rejectDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmReject" :loading="rejectLoading">
					确 定
				</el-button>
			</span>
		</el-dialog>

		<!-- 取消授权确认对话框 -->
		<el-dialog title="确认取消授权" :visible.sync="cancelDialogVisible" width="30%" @close="resetDialog">
			<div class="dialog-content">
				<p v-if="currentItem.doctorName">
					您确定要取消 <strong>{{ currentItem.doctorName }}</strong> 医生对病历 <strong>{{ currentItem.docId }}</strong>
					的访问授权吗？
				</p>
				<p v-else>
					您确定要取消 <strong>{{ currentItem.doctorId }}</strong> 医生对病历 <strong>{{ currentItem.docId }}</strong>
					的访问授权吗？
				</p>
				<p class="dialog-tip">取消后，医生将无法再访问该病历。</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelDialogVisible = false">取 消</el-button>
				<el-button type="warning" @click="confirmCancel" :loading="cancelLoading">
					确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import http from "@/utils/request";

	export default {
		name: 'EmpowerManagement',
		data() {
			return {
				// 激活的标签页
				activeTab: 'medicalRecord',
				// 病历授权列表数据
				medicalRecordEmpowerList: [],
				// 检查授权列表数据
				checkupEmpowerList: [],
				// 加载状态
				medicalRecordLoading: false,
				checkupLoading: false,

				// 对话框相关
				approveDialogVisible: false,
				rejectDialogVisible: false,
				cancelDialogVisible: false,

				// 当前操作项
				currentItem: {},
				// 当前操作类型（medicalRecord 或 checkup）
				currentOperationType: 'medicalRecord',

				// 加载状态
				approveLoading: false,
				rejectLoading: false,
				cancelLoading: false
			}
		},
		// 页面初始化时加载授权列表
		async created() {
			await this.loadMedicalRecordEmpowerList();
		},
		methods: {
			// 处理标签页点击
			handleTabClick(tab) {
				if (tab.name === 'checkup' && this.checkupEmpowerList.length === 0) {
					this.loadCheckupEmpowerList();
				}
			},

			// 加载病历授权列表
			async loadMedicalRecordEmpowerList() {
				this.medicalRecordLoading = true;
				try {
					const resp = await http.get("/patient/getEmpowerList", {
						headers: {
							'username': this.$store.state.user.username
						}
					});

					// 注意：现在成功的 code = 1
					if (resp.data.code === 1) {
						this.medicalRecordEmpowerList = resp.data.data || [];
						// 为每个项添加加载状态
						this.medicalRecordEmpowerList.forEach(item => {
							this.$set(item, 'approveLoading', false);
							this.$set(item, 'rejectLoading', false);
							this.$set(item, 'cancelLoading', false);
							this.$set(item, 'reApproveLoading', false);
						});
					} else {
						this.$message.error(resp.data.msg || '加载失败');
					}
				} catch (error) {
					console.error('加载病历授权列表失败:', error);
					this.$message.error('加载失败，请检查网络连接');
				} finally {
					this.medicalRecordLoading = false;
				}
			},

			// 加载检查授权列表
			async loadCheckupEmpowerList() {
				this.checkupLoading = true;
				try {
					const resp = await http.get("/patient/getCheckupList", {
						headers: {
							'username': this.$store.state.user.username
						}
					});

					// 注意：现在成功的 code = 1
					if (resp.data.code === 1) {
						this.checkupEmpowerList = resp.data.data || [];
						// 为每个项添加加载状态
						this.checkupEmpowerList.forEach(item => {
							this.$set(item, 'approveLoading', false);
							this.$set(item, 'rejectLoading', false);
							this.$set(item, 'cancelLoading', false);
							this.$set(item, 'reApproveLoading', false);
						});
					} else {
						this.$message.error(resp.data.msg || '加载失败');
					}
				} catch (error) {
					console.error('加载检查授权列表失败:', error);
					this.$message.error('加载失败，请检查网络连接');
				} finally {
					this.checkupLoading = false;
				}
			},

			// 病历批准授权
			handleMedicalRecordApprove(item) {
				this.currentItem = item;
				this.currentOperationType = 'medicalRecord';
				this.approveDialogVisible = true;
			},

			// 病历拒绝授权
			handleMedicalRecordReject(item) {
				this.currentItem = item;
				this.currentOperationType = 'medicalRecord';
				this.rejectDialogVisible = true;
			},

			// 病历取消授权
			handleMedicalRecordCancel(item) {
				this.currentItem = item;
				this.currentOperationType = 'medicalRecord';
				this.cancelDialogVisible = true;
			},

			// 病历重新批准（从拒绝状态重新批准）
			async handleMedicalRecordReApprove(item) {
				item.reApproveLoading = true;
				try {
					const resp = await http.post('/patient/updateEmpowerStatus', {
						docId: item.docId,
						doctorId: item.doctorId,
						isEmpower: '1' // 批准授权发送状态码 1
					});

					if (resp.data.code === 1) {
						this.$message.success('重新授权成功');
						item.isEmpower = '1';
					} else {
						this.$message.error(resp.data.msg || '操作失败');
					}
				} catch (error) {
					console.error('重新授权失败:', error);
					this.$message.error('操作失败');
				} finally {
					item.reApproveLoading = false;
				}
			},

			// 检查批准授权
			handleCheckupApprove(item) {
				this.currentItem = item;
				this.currentOperationType = 'checkup';
				this.approveDialogVisible = true;
			},

			// 检查拒绝授权
			handleCheckupReject(item) {
				this.currentItem = item;
				this.currentOperationType = 'checkup';
				this.rejectDialogVisible = true;
			},

			// 检查取消授权
			handleCheckupCancel(item) {
				this.currentItem = item;
				this.currentOperationType = 'checkup';
				this.cancelDialogVisible = true;
			},

			// 检查重新批准（从拒绝状态重新批准）
			async handleCheckupReApprove(item) {
				item.reApproveLoading = true;
				try {
					const resp = await http.post('/patient/updateCheckupStatus', {
						doctorId: item.doctorId,
						visitId: item.visitId,
						isEmpower: '1' // 批准授权发送状态码 1
					});

					if (resp.data.code === 1) {
						this.$message.success('重新授权成功');
						item.isEmpower = '1';
					} else {
						this.$message.error(resp.data.msg || '操作失败');
					}
				} catch (error) {
					console.error('重新授权失败:', error);
					this.$message.error('操作失败');
				} finally {
					item.reApproveLoading = false;
				}
			},

			// 确认批准
			async confirmApprove() {
				this.approveLoading = true;
				this.currentItem.approveLoading = true;
				try {
					let resp;
					let list;
					let updateField;

					if (this.currentOperationType === 'medicalRecord') {
						// 病历授权
						resp = await http.post('/patient/updateEmpowerStatus', {
							docId: this.currentItem.docId,
							doctorId: this.currentItem.doctorId,
							isEmpower: '1' // 批准授权发送状态码 1
						});
						list = this.medicalRecordEmpowerList;
						updateField = 'docId';
					} else if (this.currentOperationType === 'checkup') {
						// 检查授权
						resp = await http.post('/patient/updateCheckupStatus', {
							doctorId: this.currentItem.doctorId,
							visitId: this.currentItem.visitId,
							isEmpower: '1' // 批准授权发送状态码 1
						});
						list = this.checkupEmpowerList;
						updateField = 'reportId';
					}

					if (resp.data.code === 1) {
						this.$message.success('授权已批准');
						// 更新列表中的状态
						const index = list.findIndex(item =>
							item[updateField] === this.currentItem[updateField] &&
							item.doctorId === this.currentItem.doctorId
						);
						if (index !== -1) {
							list[index].isEmpower = '1';
						}
					} else {
						this.$message.error(resp.data.msg || '操作失败');
					}
				} catch (error) {
					console.error('批准授权失败:', error);
					this.$message.error('操作失败');
				} finally {
					this.approveLoading = false;
					this.currentItem.approveLoading = false;
					this.approveDialogVisible = false;
					this.resetDialog();
				}
			},

			// 确认拒绝
			async confirmReject() {
				this.rejectLoading = true;
				this.currentItem.rejectLoading = true;
				try {
					let resp;
					let list;
					let updateField;

					if (this.currentOperationType === 'medicalRecord') {
						// 病历授权
						resp = await http.post('/patient/updateEmpowerStatus', {
							docId: this.currentItem.docId,
							doctorId: this.currentItem.doctorId,
							isEmpower: '2' // 拒绝授权发送状态码 2
						});
						list = this.medicalRecordEmpowerList;
						updateField = 'docId';
					} else if (this.currentOperationType === 'checkup') {
						// 检查授权
						resp = await http.post('/patient/updateCheckupStatus', {
							doctorId: this.currentItem.doctorId,
							visitId: this.currentItem.visitId,
							isEmpower: '2' // 拒绝授权发送状态码 2
						});
						list = this.checkupEmpowerList;
						updateField = 'reportId';
					}

					if (resp.data.code === 1) {
						this.$message.success('授权已拒绝');
						// 更新列表中的状态
						const index = list.findIndex(item =>
							item[updateField] === this.currentItem[updateField] &&
							item.doctorId === this.currentItem.doctorId
						);
						if (index !== -1) {
							list[index].isEmpower = '2';
						}
					} else {
						this.$message.error(resp.data.msg || '操作失败');
					}
				} catch (error) {
					console.error('拒绝授权失败:', error);
					this.$message.error('操作失败');
				} finally {
					this.rejectLoading = false;
					this.currentItem.rejectLoading = false;
					this.rejectDialogVisible = false;
					this.resetDialog();
				}
			},

			// 确认取消（取消授权也发送状态码 2）
			async confirmCancel() {
				this.cancelLoading = true;
				this.currentItem.cancelLoading = true;
				try {
					let resp;
					let list;
					let updateField;

					if (this.currentOperationType === 'medicalRecord') {
						// 病历授权
						resp = await http.post('/patient/updateEmpowerStatus', {
							docId: this.currentItem.docId,
							doctorId: this.currentItem.doctorId,
							isEmpower: '2' // 取消授权发送状态码 2
						});
						list = this.medicalRecordEmpowerList;
						updateField = 'docId';
					} else if (this.currentOperationType === 'checkup') {
						// 检查授权
						resp = await http.post('/patient/updateCheckupStatus', {
							doctorId: this.currentItem.doctorId,
							visitId: this.currentItem.visitId,
							isEmpower: '2' // 取消授权发送状态码 2
						});
						list = this.checkupEmpowerList;
						updateField = 'reportId';
					}

					if (resp.data.code === 1) {
						this.$message.success('授权已取消');
						// 更新列表中的状态
						const index = list.findIndex(item =>
							item[updateField] === this.currentItem[updateField] &&
							item.doctorId === this.currentItem.doctorId
						);
						if (index !== -1) {
							list[index].isEmpower = '2';
						}
					} else {
						this.$message.error(resp.data.msg || '操作失败');
					}
				} catch (error) {
					console.error('取消授权失败:', error);
					this.$message.error('操作失败');
				} finally {
					this.cancelLoading = false;
					this.currentItem.cancelLoading = false;
					this.cancelDialogVisible = false;
					this.resetDialog();
				}
			},

			// 重置对话框
			resetDialog() {
				this.currentItem = {};
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'0': '授权中',
					'1': '已授权',
					'2': '已拒绝'
				};
				return statusMap[status] || '未知状态';
			},

			// 获取标签类型
			getStatusTagType(status) {
				const typeMap = {
					'0': 'warning', // 授权中 - 黄色
					'1': 'success', // 已授权 - 绿色
					'2': 'danger' // 已拒绝 - 红色
				};
				return typeMap[status] || 'info';
			},

			// 格式化报告类型
			formatReportType(type) {
				const typeMap = {
					'imaging': '影像检查',
					'laboratory': '实验室检查',
					'pathology': '病理检查',
					'other': '其他检查'
				};
				return typeMap[type] || type || '未知类型';
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return 'N/A';
				// 尝试解析日期字符串
				const date = new Date(dateStr);
				if (isNaN(date.getTime())) {
					// 如果解析失败，直接返回原始字符串
					return dateStr;
				}
				// 格式化日期为 yyyy-MM-dd HH:mm:ss
				return date.toLocaleString('zh-CN');
			},

			// 格式化报告类型
			formatReportType(type) {
				const typeMap = {
					'imaging': '影像检查',
					'laboratory': '实验室检查',
					'pathology': '病理检查',
					'other': '其他检查'
				};
				return typeMap[type] || type || '未知类型';
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return 'N/A';
				// 尝试解析日期字符串
				const date = new Date(dateStr);
				if (isNaN(date.getTime())) {
					// 如果解析失败，直接返回原始字符串
					return dateStr;
				}
				// 格式化日期为 yyyy-MM-dd HH:mm:ss
				return date.toLocaleString('zh-CN');
			},
		}
	}
</script>

<style scoped>
	/* 样式保持不变 */
	.empower-management {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: calc(100vh - 84px);
	}

	.page-header {
		margin-bottom: 30px;
		padding: 20px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.page-header h2 {
		margin: 0;
		color: #303133;
		font-size: 24px;
		display: flex;
		align-items: center;
	}

	.page-header h2 i {
		margin-right: 10px;
		color: #409eff;
	}

	.page-description {
		margin: 10px 0 0;
		color: #909399;
		font-size: 14px;
	}

	.empower-list {
		margin-top: 20px;
	}

	.empower-card {
		height: 100%;
		transition: all 0.3s ease;
	}

	.empower-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 20px;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #409eff;
	}

	.empower-info {
		margin-bottom: 20px;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		font-size: 14px;
		color: #606266;
	}

	.info-item i {
		margin-right: 8px;
		color: #909399;
		min-width: 16px;
	}

	.info-item .label {
		min-width: 60px;
		color: #909399;
	}

	.info-item .value {
		flex: 1;
		color: #303133;
		word-break: break-all;
	}

	.action-buttons {
		display: flex;
		gap: 10px;
		justify-content: center;
		flex-wrap: wrap;
	}

	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 400px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.loading-state {
		padding: 20px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.dialog-content {
		padding: 10px 0;
	}

	.dialog-content p {
		margin: 10px 0;
		line-height: 1.6;
	}

	.dialog-tip {
		color: #e6a23c;
		font-size: 13px;
		background-color: #fdf6ec;
		padding: 8px;
		border-radius: 4px;
		border-left: 4px solid #e6a23c;
	}

	@media (max-width: 768px) {
		.empower-management {
			padding: 10px;
		}

		.page-header {
			padding: 15px;
		}

		.card-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		.action-buttons {
			flex-direction: column;
		}

		.info-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;
		}

		.info-item .label {
			min-width: auto;
		}
	}
</style>